<template>
    <div>
        <a-modal v-model:visible="modalVisible" title="实名认证" @ok="handleOk" @cancel="handleCancel" width="500px">
            <div class="mb-8">您的实名认证信息将会加密保存，不会泄露给第三方</div>
            <a-form class="query-list-form" :model="form" ref="formRef" :label-col="{
                style: {
                    width: '100px',
                }
            }">
                <a-form-item name="realName" label="姓名" :rules="[{ required: true, message: '请输入真实姓名' }]">
                    <a-input v-model:value="form.realName" allowClear autocomplete="off" placeholder="请输入真实姓名"></a-input>
                </a-form-item>

                <a-form-item name="idCard" label="身份证号" :rules="[{ required: true, validator: validIdCard }]">
                    <div class="form-item-code">
                        <a-input v-model:value="form.idCard" allowClear autocomplete="off"
                            placeholder="请输入你的身份证号"></a-input>
                    </div>
                </a-form-item>

                <a-form-item name="idCardFront" label="身份证照片" :rules="[{ required: true, message: '请上传身份证正面照!' }]">
                    <a-upload v-model:file-list="idCardFrFileList" name="file" list-type="picture-card" :headers="headers"
                        class="avatar-uploader" :action="uploadImgUrl" @change="handleIdCardFrChange">
                        <div v-if="idCardFrFileList.length < 1">
                            <plus-outlined></plus-outlined>
                            <div class="ant-upload-text">请上传身份证正面照</div>
                        </div>
                    </a-upload>
                </a-form-item>

                <a-form-item name="idCardBack" label="身份证照片" :rules="[{ required: true, message: '请上传身份证反面照!' }]">
                    <a-upload v-model:file-list="idCardBackFileList" name="file" list-type="picture-card" :headers="headers"
                        class="avatar-uploader" :action="uploadImgUrl" @change="handleIdCardBackChange">
                        <div v-if="idCardBackFileList.length < 1">
                            <plus-outlined></plus-outlined>
                            <div class="ant-upload-text">请上传身份证反面照</div>
                        </div>
                    </a-upload>
                </a-form-item>

            </a-form>
        </a-modal>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed, ref } from 'vue';
import { XsyMessage } from '@/libs/util.toast'
import { nameAuthApi } from 'api/modules/api.account'
import { uploadImgUrl } from '@/api/server.js'
import dbUtils from "libs/util.strotage";
import userInfoStore from '@/stores/userInfo.js'
import { validIdCard } from '@/libs/util.valid.js'

const form = ref({})

const props = defineProps({
    modelValue: {
        type: Boolean,
    },
});

const emit = defineEmits(['update:modelValue', 'refreshInfo']);
const modalVisible = computed({
    get: () => props.modelValue,
    set: v => emit('update:modelValue', v),
});

// 确定按钮的回调
const handleOk = () => {
    formRef.value.validateFields().then(() => {
        nameAuthApi(form.value).then(res => {
            if (res.code == 0) {
                XsyMessage.success('提交成功')
                emit('update:modelValue', false)
                userInfoStore().getUserInfo().then(() => { })
            }
        })
    })
};

// 取消重置表单
const formRef = ref()
const handleCancel = () => {
    formRef.value.resetFields();
}

// 上传图片
const idCardFrFileList = ref([])
const idCardBackFileList = ref([])
const headers = {
    'gm-session-id': dbUtils.get('token')
}

const handleIdCardFrChange = ({
    file,
}) => {
    if (file.status === 'error') {
        XsyMessage.error(file.response.message || '上传失败')
    }
    if (file.status === 'done') {
        form.value.idCardFront = file.response.data.url || ''
    }
};

const handleIdCardBackChange = ({
    file,
}) => {
    if (file.status === 'error') {
        XsyMessage.error(file.response.message || '上传失败')
    }
    if (file.status === 'done') {
        form.value.idCardBack = file.response.data.url || ''
    }
};

</script>



